<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Company example • Pico CSS</title>
    <meta
      name="description"
      content="A classic company or blog layout with a sidebar. Built with Pico CSS."
    />
    <link rel="shortcut icon" href="https://picocss.com/favicon.ico" />

    <!-- Pico.css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />

    <!-- Custom styles for this example -->
    <link rel="stylesheet" href="custom.css" />
  </head>

  <body>
    <!-- Hero -->
    <div class="hero" data-theme="dark">
      <nav class="container-fluid">
        <ul>
          <li>
            <a href="./" class="contrast" onclick="event.preventDefault()"
              ><strong>Brand</strong></a
            >
          </li>
        </ul>
        <ul>
          <li>
            <details role="list" dir="rtl">
              <summary aria-haspopup="listbox" role="link" class="contrast">Theme</summary>
              <ul role="listbox">
                <li><a href="#" data-theme-switcher="auto">Auto</a></li>
                <li><a href="#" data-theme-switcher="light">Light</a></li>
                <li><a href="#" data-theme-switcher="dark">Dark</a></li>
              </ul>
            </details>
          </li>
        </ul>
      </nav>
      <header class="container">
        <hgroup>
          <h1>Company</h1>
          <p>A classic company or blog layout with a sidebar</p>
        </hgroup>
        <p><a href="#" role="button" onclick="event.preventDefault()">Call to action</a></p>
      </header>
    </div>
    <!-- ./ Hero -->

    <!-- Main -->
    <main class="container">
      <div class="grid">
        <section>
          <hgroup>
            <h2>Ut sit amet sem ut velit</h2>
            <p>Quisque mi est</p>
          </hgroup>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis est vel
            velit bibendum ultrices. Sed aliquam tortor vel odio fermentum ullamcorper eu vitae
            neque. Sed non diam at tellus venenatis viverra. Vestibulum et leo laoreet arcu tempor
            eleifend venenatis ac leo. Pellentesque euismod justo sed nisl sollicitudin varius. Duis
            venenatis nisl sit amet ante rutrum posuere. Etiam nec ullamcorper leo, sed placerat
            mauris.
          </p>
          <figure>
            <img src="img/ashim-d-silva-3Ijt7UkSBYE-unsplash-1500x750.jpg" alt="Architecture" />
            <figcaption>
              Image from
              <a href="https://unsplash.com/photos/3Ijt7UkSBYE" target="_blank">unsplash.com</a>
            </figcaption>
          </figure>
          <h3>Nulla augue metus</h3>
          <p>
            Pacilisis sed ante ut, posuere volutpat quam. Maecenas maximus blandit mi ac finibus.
            Proin quis lacinia tellus. Aliquam erat volutpat. Aliquam erat volutpat. Phasellus
            suscipit nisi augue, id accumsan tortor auctor ut. Duis odio arcu, egestas nec nulla
            vel, fermentum bibendum ex.
          </p>
          <h3>Sed purus sapien, porta a cursus sed, maximus et metus.</h3>
          <p>
            Phasellus molestie ante sed massa bibendum, eget tempus ex sollicitudin. Vestibulum
            libero nulla, porttitor nec faucibus et, scelerisque eget quam. Nullam finibus tempor
            dui, vel congue urna condimentum ac. Fusce ultricies mauris justo, nec vulputate mauris
            pulvinar eu. Sed tempus ligula lorem, at tincidunt risus mollis non. Quisque et turpis
            sit amet sapien gravida ullamcorper in eu velit. Curabitur luctus ornare finibus. Proin
            tempor nulla sagittis est fermentum dapibus. Vestibulum posuere mattis congue. Ut
            porttitor id sem euismod tristique. Quisque mi est, posuere nec lorem eu, vulputate
            vehicula diam. Nullam scelerisque, libero posuere efficitur bibendum, urna odio finibus
            lorem, sed volutpat dolor ligula in dolor. Suspendisse suscipit efficitur neque, ut
            porta tellus mollis vel. Nam consequat arcu ac tellus porta, nec egestas orci sodales.
          </p>
        </section>

        <aside>
          <a href="#" aria-label="Example" onclick="event.preventDefault()"
            ><img src="img/maarten-deckers-T5nXYXCf50I-unsplash-1500x750.jpg" alt="Architecture"
          /></a>
          <p>
            <a href="#" onclick="event.preventDefault()">Donec sit amet</a><br />
            <small>Class aptent taciti sociosqu ad litora torquent per conubia nostra</small>
          </p>
          <a href="#" aria-label="Example" onclick="event.preventDefault()"
            ><img src="img/daniel-von-appen-tb4heMa-ZRo-unsplash-1500-750.jpg" alt="Architecture"
          /></a>
          <p>
            <a href="#" onclick="event.preventDefault()">Suspendisse potenti</a><br />
            <small>Proin non condimentum tortor. Donec in feugiat sapien.</small>
          </p>
          <a href="#" aria-label="Example" onclick="event.preventDefault()"
            ><img src="img/matthew-hamilton-Ru3Ap8TNcsk-unsplash-1500-750.jpg" alt="Architecture"
          /></a>
          <p>
            <a href="#" onclick="event.preventDefault()">Nullam lobortis placerat aliquam</a><br />
            <small
              >Maecenas vitae nibh blandit dolor commodo egestas vel eget neque. Praesent semper
              justo orci, vel imperdiet mi auctor in.</small
            >
          </p>
        </aside>
      </div>
    </main>
    <!-- ./ Main -->

    <!-- Subscribe -->
    <section aria-label="Subscribe example">
      <div class="container">
        <article>
          <hgroup>
            <h2>Subscribe</h2>
            <p>Litora torquent per conubia nostra</p>
          </hgroup>
          <form class="grid">
            <input
              type="text"
              id="firstname"
              name="firstname"
              placeholder="First name"
              aria-label="First name"
              required
            />
            <input
              type="email"
              id="email"
              name="email"
              placeholder="Email address"
              aria-label="Email address"
              required
            />
            <button type="submit" onclick="event.preventDefault()">Subscribe</button>
          </form>
        </article>
      </div>
    </section>
    <!-- ./ Subscribe -->

    <!-- Footer -->
    <footer class="container">
      <small
        >Built with <a href="https://picocss.com">Pico</a> •
        <a href="https://github.com/picocss/examples/tree/master/v1-company/">Source code</a></small
      >
    </footer>
    <!-- ./ Footer -->

    <!-- Minimal theme switcher -->
    <script src="js/minimal-theme-switcher.js"></script>
  </body>
</html>
